<template>
  <view class="page-wrap">
    <view class="common-header-bg" :style="{paddingTop: (useAppData.titleHeight+3) + 'px'}">
      <view class="header-common">
        <view class="back-box" @tap="gotoBack">
          <image class="back-img" src="../../static/icon-back.png"></image>
        </view>
        <span>体检详情</span>
      </view>
      <view class="header-footer">
        <view class="detail-user">
          <view class="user-left">
            <view class="user-name">
              <text class="name">{{state.quatoUserInfo?.name}}</text>
              <view class="sex">
                <image class="icon-sex" src="../../static/icon-boy.png"></image>
                <text class="sex-txt">{{state.quatoUserInfo?.gender}}</text>
              </view>
            </view>
            <view class="user-age">
              <view class="item age">
                <p class="label">年龄</p>
                <text>{{state.quatoUserInfo?.age}}</text>
              </view>
              <view class="item height"> 
                <p class="label">身高</p>
                <text>{{state.quatoUserInfo?.height}}cm</text>
              </view>
            </view>
          </view>
          <view class="user-right">
            <view class="score">
              <text>{{state.quatoUserInfo?.score}}</text>分
            </view>
            <text class="label">综合评估得分</text>
          </view>
        </view>
        <view class="exam-time">{{state.quatoUserInfo?.examTime}}</view>
      </view>
    </view>
    <ul class="record-box" v-if="state.quatoList?.length > 0">
      <li class="record-item" v-for="(item, index) in state.quatoList" :key="index">
        <view>{{item.quatoName}}</view>
        <view class="quato">
          <text>{{item.quatoNum}}</text>
          <!-- <view class="common normal">正常</view>
          <view class="common abnormal">过低</view> -->
        </view>
      </li>
    </ul>
    <view v-else class="no-record">
      <image class="no-img" src="../../static/no-record.png"></image>
      <text>无记录</text>
    </view>
  </view>
</template>
 
<script setup>
  import { onLoad, onShow, onHide, onUnload, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
  import { reactive, onMounted, getCurrentInstance } from "vue"
  import * as API from "../../api/api"
  import { storeToRefs } from "pinia";
  import { useExaminationStore } from "../store/examination";
  import { useAppStore } from "../../store/app";
  import { useShareStore } from "../../store/share";
  const useShareData = useShareStore()
  const useAppData = useAppStore()
  const useExaminationData = useExaminationStore()
  const { proxy, ctx } = getCurrentInstance()
  const state = reactive({
    quatoUserInfo: null,
    quatoList: [],
    userInfo: null
  })

  const gotoBack = () => {
    uni.navigateBack()
  }

  const gotoChat = (url) => {
    uni.navigateTo({
      url: "/pages/chat/chat"
    });
  }

  onShareAppMessage((res) => {
    return useShareData.shareInfo
  })
  onShareTimeline((res) => {
    return useShareData.shareInfo
  })

  onShow(() => {
    state.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : null
    state.quatoList = []
    const eventChannel = proxy.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function(res) {
      if (!res.data) return
      state.quatoUserInfo = res.data
      Object.keys(useExaminationData.quatoObj).map((key)=>{
        state.quatoList.push({
          quatoName: key, 
          quatoNum: res.data[useExaminationData.quatoObj[key]]
        })
      })
    })
  })
</script>
 
<style lang="scss" scoped>
  .page-wrap{
    background: #F6FDFB;
    font-size: 32rpx;
    color: #1C1C1E;
  }
  .header-footer{
    padding: 5rpx 32rpx;
    overflow: hidden;
    .exam-time{
      float: right;
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #93939B;
    }
  }
  .detail-user{
    width: 686rpx;
    height: 220rpx;
    background: linear-gradient( 164deg, #DBFFDC 0%, #5FDBB0 100%);
    border-radius: 32rpx;
    padding: 24rpx 34rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 32rpx;
    color: #1C1C1E;
    .user-left{
      .user-name{
        display: flex;
        .name{
          font-weight: 500;
          font-size: 36rpx;
        }
        .sex{
          width: 92rpx;
          height: 48rpx;
          border-radius: 24rpx;
          border: 2rpx solid #94D4FF;
          margin-left: 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .icon-sex{
            width: 36rpx;
            height: 36rpx;
          }
        }
        .sex-girl{
          border: 2rpx solid #FF9494;
        }
      }
      .user-age{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 26rpx;
        .item{
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .height{
          margin-left: 38rpx;
        }
      }
    }
    .label{
      font-size: 28rpx;
      color: #737972;
    }
    .user-right{
      width: 292rpx;
      height: 172rpx;
      background: linear-gradient( 175deg, #EEFFF1 0%, #DEFFF5 100%);
      border-radius: 16rpx;
      padding: 44rpx 62rpx 22rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .score{
        text{
          font-weight: 600;
          font-size: 70rpx;
        }
      }
    }
  }
  .record-box{
    height: calc(100vh - 530rpx);
    background: #fff;
    box-sizing: border-box;
    overflow: auto;
    .record-item{
      padding: 32rpx 32rpx 30rpx;
      background: #FFFFFF;
      box-shadow: inset 0rpx -2rpx 0rpx 0rpx #E6E8EF;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .quato{
        display: flex;
      }
      .common{
        padding: 8rpx 18rpx;
        font-size: 26rpx;
        border-radius: 30rpx;
        flex-shrink: 0;
        margin-left: 16rpx;
      }
      .normal{
        background: #E2F9E9;
        color: #08CB8F;
      }
      .abnormal{
        background: #FFF2E5;
        color: #FF8600;
      }
    }
  }
  .no-record{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40rpx;
    color: #222222;
    padding-top: 20vh;
    .no-img{
      width: 200rpx;
      height: 176rpx;
      margin-bottom: 36rpx;
    }
  }
</style>